import 'package:flutter/material.dart';

/// packages
import 'package:provider/provider.dart';

import 'counter_view_model.dart';

class CounterView extends StatelessWidget {
  const CounterView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.black,
        child: const Icon(Icons.arrow_upward),
        onPressed: () {
          Navigator.pushNamed(context, '/counter_operation');
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      body: const SafeArea(
        child: Counter(),
      ),
    );
  }
}

class Counter extends StatelessWidget {
  const Counter({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        height: 128.0,
        width: 128.0,
        child: DecoratedBox(
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [
                Color(0xFFE3B2CB),
                Color(0xFFE3B2CB),
              ],
            ),
            borderRadius: BorderRadius.circular(36.0),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                "Count",
                style: TextStyle(
                  fontSize: 16.0,
                ),
              ),

              /// Provider
              Consumer<CounterViewModel>(
                builder: (_, CounterViewModel counterViewModel, child) {
                  int _count = counterViewModel.count;
                  return Text(
                    _count.toString(),
                    style: const TextStyle(
                      fontSize: 48.0,
                      fontWeight: FontWeight.bold,
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}
